<template>
    <div>
        <van-nav-bar
        title="登录"
        left-text="返回"
        left-arrow
        @click-left="proxy.$leftClick()"
      />
        <van-form @submit="onSubmit">
            <van-cell-group inset>
              <van-field
                label-width="50px"
                v-model="username"
                name="username"
                label="电话"
                placeholder="电话"
                :rules="[{ required: true, message: '请填写电话' }]"
                size="large"
              />
              <van-field
                label-width="50px"
                v-model="password"
                type="password"
                name="password"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
                size="large"
              />
            </van-cell-group>
            <div style="margin: 16px;">
              <van-button round block type="primary" native-type="submit" class="btns">
                登录
              </van-button>
            </div>
          </van-form>

        <div class="as">
            还没有账号？
            <a @click="zhuce">去注册</a>
        </div>
    </div>
    
</template>

<script setup lang="ts">
    import {ref,getCurrentInstance} from 'vue'
    import {useRouter} from 'vue-router'
    import {login} from '../api/user'
    import { useGouwu } from '@/store/gouwu';
    import { useRess } from '@/store/ress';
    const ress  = useRess()
    let store = useGouwu();
    const {proxy}:any =getCurrentInstance()
    const router = useRouter()
    // 电话号码
    const username = ref('')
    //密码
    const password = ref('')
    // 点击左侧返回键
    const onSubmit = async (v:{username:string,password:string})=>{
        const res = await login(v.username,v.password);
          localStorage.setItem('token',res.data.token);
          localStorage.setItem('userId',res.data.userid);
          store.fecthGetData();
          ress.fetchGetRess();
          router.push({name:'admin'})
    }
    // 点击注册按钮
    const zhuce = ()=> router.push({name:'zhuce'})
</script>

<style scoped>
    .btns{
        height: 30px;
        font-size: 14px;
    }
    .as{
        margin-top: 35px;
        width: 100%;
        text-align: right;
        padding-right: 30px;
        box-sizing: border-box;
        font-size: 13px;
    }
    .as>a{
        color: skyblue;
    }
</style>